<template>
    <!-- 没有子级 -->
    <el-menu-item :index="basePath" @click="clickMenu(item)" v-if="!item.children.length>0">
      <i :class="item.icon"></i>&nbsp;&nbsp;
      <span>{{ item.menuName }}</span>
    </el-menu-item>

    <!-- 有子级 -->
    <el-sub-menu v-else :index="basePath">
      <template #title>
        <i :class=" item.icon"></i>&nbsp;&nbsp;
        <span>{{ item.menuName }}</span>
      </template>
      <!-- 递归组件 -->
      <NavItem v-for="sub in item.children" :key="sub.url" :item="sub" @click="clickMenu(sub)" :basePath="sub.url"/>
    </el-sub-menu>
</template>

<script>
export default {
  //注意此处的name, 上面的<template>里面会根据'NavItem'在组件内部实现递归(自己调用自己)
  name: 'NavItem',
  //计算属性
  computed: {
    isCollapse() {
      // 这里的数据就是从vuex取得
      return this.$store.state.tab.isCollapse
    }
  },
  data() {
    return {
      id: 0
    }
  },
  props: ['item', 'basePath'],

  methods: {
    //跳转路由 根据名称跳转
    clickMenu(item) {
      this.$store.commit('selectMenu', item)
      this.$router.push({name: item.name})
    }
  }
}

</script>


<style scoped>
.el-sub-menu {
  border-right: none;
}
</style>


